<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是网页的标题</title>
    <style>
    </style>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <div class="box">
        <div class="msg">
            <span>1</span>
            <span>2</span>
        </div>
        <span>3</span>
        <span>4</span>
    </div>
    <em>文字1</em>
    <em>文字2</em>
    <em>文字3</em>
    <em>文字4</em>

    <form action="">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </form>
    <form action=""></form>
    <form action=""></form>

</body>
<script>

    // 关系选择

    // var oBox = document.getElementsByClassName("box")[0];
    var oBox = document.querySelector(".box");

    console.log( oBox.parentNode );
    
    console.log( oBox.children );
    
    console.log( oBox.firstElementChild );
    
    console.log( oBox.lastElementChild );

    console.log( oBox.previousElementSibling );

    console.log( oBox.nextElementSibling );

    // ===========

    // 特殊选择

    // html标签选择器
    console.log( document.documentElement );

    console.log( document.head );
    
    console.log( document.body );

    // 获取页面所有的表单元素
    console.log( document.forms );
    
    // 获取页面某个表单元素中的表单控件元素
    console.log( document.forms[0].elements );

    // 不是选择器，而是直接获取title的内容
    console.log( document.title );


    
</script>
</html>